<template>
    <div class="l-login">
      <header-top @scroll="scroll"></header-top>

      <!--登录框-->
      <div>
        <div class="l-form">
            <p class="l-title">东方城登录</p>


            <div class="l-filed">
              <label>手机号码</label>
              <input @blur="getVerify" ref="phone" class="l-active" type="text" placeholder="请输入您的手机号码">
            </div>

            <div class="l-filed">
            <label>密码</label>
            <input ref="password" type="password" placeholder="请输入密码">
          </div>

            <div class="l-filed">
            <label>验证码</label>
            <input ref="verify" type="text" placeholder="请输入验证码">
              <img @click="getVerify" class="l-show-verify" v-if="showVerify" :src="imgURLCode" alt="无法显示">
          </div>

            <div class="l-filed l-padding-left">
              <span data-name="register" @touchstart="router">快速注册</span>
              <span data-name="forget" @touchstart="router" class="l-router-active">忘记密码？</span>
            </div>

          <button @click="login" class="l-login-btn">立即登录</button>
        </div>
      </div>
    </div>
</template>

<script>
   import headerTop from '@/components/common/HeaderTop'
   import baseConfig from '@/minix/baseConfig'
   import {Toast} from 'mint-ui'
   import {mapActions} from 'vuex'
   import api from "@/api/base"
    export default {
        name: "login",
        mixins: [baseConfig],
        data () {
          return {
            showVerify: false,
            imgURLCode: ""
          }
        },
        components: {
          headerTop,
          Toast
        },
        methods: {
          ...mapActions(['saveUserInfo']),
          router (e) {
            this.$router.push({name: e.target.dataset.name})
          },
          login () {
            let data ={}
            data['phone'] = this.$refs.phone.value
            data['password'] = this.$refs.password.value
            data['verify']  = this.$refs.verify.value

            if(!data['phone']) {
               Toast({
                 message: '手机号码不能为空',
                 position: 'middle',
                 duration: 1000
               })
            } else if (!data['password']) {
              Toast({
                message: '密码不能为空',
                position: 'middle',
                duration: 1000
              })
            } else if (!data['verify']) {
              Toast({
                message: '验证码不能为空',
                position: 'middle',
                duration: 1000
              })
            } else {
              // ajax

              let formdata = new FormData
              formdata.append('phone', data['phone'])
              formdata.append('password', data['password'])
              formdata.append('code', data['verify'])

              api.post("user/login", formdata).then( res => {
                this.saveUserInfo(res)
                this.$router.push({name: 'account'})
              })
            }

          },
          getVerify () {
            let data = {}
            data['phone'] = this.$refs.phone.value

            if(!data['phone']) {
              Toast({
                message: '手机号码不能为空',
                position: 'middle',
                duration: 1000
              })
            } else if (!/1[3,4,5,7,8][0-9]{9}/.test(data['phone'])) {
              Toast({
                message: '手机号码格式不正确',
                position: 'middle',
                duration: 1000
              })
            } else {
              this.showVerify = true
              this.imgURLCode = this.imgURL +"?phone=" + data['phone'] + "&time="+(new Date()).getTime()
            }
          },
          scroll (e) {
            this.$router.push({name: "Index", params: {target: e}})
          }
        }
    }
</script>

<style lang="less" scoped>
  .l-login {
    background-image: url('../../static/img/bg_login_m.jpg');
    background-size: cover;
    padding-bottom: 200px;
    min-height: 100%;
  }

  .l-form {
    width: 640px;
    border: 1px solid #fff; /*no*/
    margin: 220px auto 0 auto;
    padding: 0 34px;
    color: #fff;

    .l-title {
      color: #fff;
      font-size: 40px;
      text-align: center;
      margin-top: 48px;
      margin-bottom: 48px;
    }
    .l-filed {
      margin-bottom: 20px;
      font-size: 32px;
      position: relative;

      &.l-padding-left {
        padding-left: 130px;
        width: 472px;
        display: flex;
        justify-content: space-between;
      }
      label {
        display: inline-block;
        width: 120px;
        height: 70px;
        line-height: 70px;
        font-size: 30px;
        text-align: justify;
      }

      span {
        display: inline-block;
        height: 60px;
        line-height: 60px;
      }

      input {
        outline:  none;
        border:  1px solid #fff;
        width: 472px;
        height: 70px;
        background-color: rgba(255,255,255, 0.1);
        color: #fff;
        padding: 10px;
        box-sizing: border-box;
        font-size: 24px;
      }
      .l-show-verify {
        position: absolute;
        top: 0;
        right: 40px;
        height: 70px;
      }
      .l-active {
        border: 1px solid #986d33; /*no*/
      }
    }

    .l-login-btn {
      width: 472px;
      margin-left: 130px;
      height: 70px;
      line-height: 70px;
      border-radius: 45px; /*no*/
      outline: none;
      border: none;
      background-color: #996e35;
      color: #fff;
      margin-bottom: 48px;
      font-size: 100%;
    }
  }

  .l-router-active {
    color: #986d33;
  }


</style>
